<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省市联动效果</title>
</head>

<body>
    <div>
        <span>省份：</span>
        <select id="province">
            <option value="0">--请选择省份--</option>
        </select>
        <span>城市：</span>
        <select id="city">
            <option value="0">--请选择城市--</option>
        </select>
        <span>区县：</span>
        <select id="district">
            <option value="0">--请选择区县--</option>
        </select>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        let data = [] //定义一个数组，用于保存数据
        //请求数据
        $.get('./data/city.json', res => {
            data = res //将请求的数据，给外面定义的data
            //在页面中显示省份数据
            data.filter(r => r.pid === 0).forEach(r => {
                //attr()方法 -> js:setAttribute() 和 getAttribute()方法的组合
                //attr()方法，传两个参数是设置属性，传一个参数是获取属性值
                let option = $("<option/>").html(r.name).attr("value", r.id)
                $("#province").append(option)
            });
        })

        //获取省份下拉框，给它绑定的内容改变事件
        $("#province").change(function () {
            //val()方法，用于获取表单元素的值 -> js:value属性
            let pid = parseInt($(this).val())  //获取省份id
            if(pid>0){
                //获取该省份对应的城市
                let citys = data.filter(r=>r.pid===pid)
                //empty()方法，用于清空所有的子项
                //remove()方法，用于删除自己
                //结构伪类选择器 :not 表示排除
                //机构伪类选择器 :eq(index) 表示指定索引
                $('#city option:not(:eq(0))').remove()
                $('#district option:gt(0)').remove()
                //循环添加该省份的城市
                citys.forEach(r=>{
                    let option = $("<option/>").html(r.name).attr("value", r.id)
                    $('#city').append(option)
                })
            }
        })

        //获取城市下拉框，给它绑定的内容改变事件
        $("#city").change(function(){
            let cid = parseInt($(this).val())  //获取城市id
            if(cid>0){
                //获取该城市对应的区县
                let districts = data.filter(r=>r.pid===cid)
                //:gt(0) 表示索引大于0
                $('#district option:gt(0)').remove()
                //循环添加该城市的区县
                districts.forEach(r=>{
                    let option = $("<option/>").html(r.name).attr("value", r.id)
                    $('#district').append(option)
                })
            }
        })
    </script>
</body>

</html>